<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <div class="text-bold">
            {{ account.nickname }}
            <q-btn round color="primary" size="sm" icon="mdi-pencil">
              <q-popup-edit v-model="nickname"
                            title="编辑昵称"
                            buttons
                            @before-show="nickname = account.nickname"
                            @save="onUpdateNickname">
                <q-input v-model="nickname" dense autofocus counter />
              </q-popup-edit>
            </q-btn>
          </div>
          <div class="text-caption text-grey">@{{ account.username }}</div>
        </div>
        <div class="col-12">
          <div class="text-bold">权限组</div>
          <div class="">{{ $t(account.group) }}</div>
        </div>
        <div class="col-12">
          <div class="text-bold">所属行会</div>
          <div class="" v-if="typeof guildInfo === 'string' && guildInfo === 'loading'">
            <q-spinner />加载中……
          </div>
          <div class="" v-else-if="guildInfo">
            {{ guildInfo.name }}
          </div>
          <div class="" v-else>
            暂无
          </div>
        </div>
        <div class="col-12">
          <q-btn color="secondary" label="修改密码">
            <q-popup-edit v-model="password"
                          title="修改密码"
                          buttons
                          :validate="validatePassword"
                          @hide="validatePassword"
                          @before-show="password = ''"
                          @save="onUpdatePassword">
              <q-input type="password"
                       hint="请输入一个6-16位的密码。"
                       :error="error"
                       :error-message="errorMsg"
                       v-model="password"
                       dense autofocus counter />
            </q-popup-edit>
          </q-btn>
        </div>
        <div class="col-12">
          <q-btn color="red" label="登出" @click="onLogout"/>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import Account from "src/lib/api/account";
import {userMessage} from "src/lib/util/message";
import Guild from "src/lib/api/guild";

export default {
  name: "Me",
  data: function () {
    return {
      nickname: '',
      password: '',
      error: false,
      errorMsg: '',
      guildInfo: null
    };
  },
  computed: {
    account: {
      get() {
        return this.$store.state.account;
      }
    }
  },
  methods: {
    async onLogout () {
      this.$q.loading.show();
      this.$store.commit('account/remove');
      await this.$router.push('/account/login');
      this.$q.loading.hide();
    },
    async onUpdateNickname () {
      this.$q.loading.show();
      await Account.update({
        nickname: this.nickname
      });
      this.$q.loading.hide();
    },
    validatePassword (val) {
      if (!val) return false;
      if (val.length < 6) {
        this.error = true;
        this.errorMsg = '密码不能小于6位！';
        return false;
      } else if (val.length > 16) {
        this.error = true;
        this.errorMsg = '密码不能大于16位！';
        return false;
      }
      this.error = false;
      this.errorMsg = '';
      return true;
    },
    async onUpdatePassword () {
      this.$q.loading.show();
      await Account.update({
        password: this.password
      });
      userMessage('info', '您已修改密码，请重新登录。');
      await this.onLogout();
      this.$q.loading.hide();
    }
  },
  async mounted() {
    this.guildInfo = 'loading';
    try {
      this.guildInfo = await Guild.info(this.account.guild);
    } catch {
      this.guildInfo = null;
    }
  }
}
</script>

<style scoped>

</style>
